.euiDataGridHeader {
  display: inline-flex;
  min-width: 100%; // Needed to prevent wraps. Inline flex is tricky
  z-index: 3; // Needs to sit above the content and focused cells
  background: $euiColorEmptyShade;
  position: sticky; // In IE11 this does not work, but doesn't cause a break.
  top: 0;
}

@include euiDataGridHeaderCell {
  @include euiFontSizeS;

  font-weight: $euiFontWeightBold;
  padding: $euiDataGridCellPaddingM;
  flex: 0 0 auto;
  position: relative;
  align-items: center;
  display: flex;

  > * {
    max-width: 100%;
    width: 100%;
  }

  &.euiDataGridHeaderCell--numeric {
    text-align: right;
  }

  &.euiDataGridHeaderCell--currency {
    text-align: right;
  }

  &:focus {
    @include euiDataGridCellFocus;
    border-top: none;
  }

  // We only truncate if the cell is not a control column.
  &:not(.euiDataGridHeaderCell--controlColumn) {

    &:focus-within {
      @include euiDataGridCellFocus;
      border-top: none;
    }

    .euiDataGridHeaderCell__button {
      flex: 0 0 auto;
      position: relative;
      align-items: center;
      display: flex;
      text-align: left;
      font-weight: $euiFontWeightBold;
      outline: none;
    }

    .euiDataGridHeaderCell__sortingArrow {
      margin-right: $euiSizeXS;
    }

    .euiDataGridHeaderCell__content {
      @include euiTextTruncate;
      overflow: hidden;
      white-space: nowrap;
      flex-grow: 1;
    }

    .euiDataGridHeaderCell__popover {
      flex-grow: 0;
      flex-basis: auto;
      width: auto;
      padding-left: $euiSizeXS;
    }
  }
}

.euiDataGridHeader__action--selected {
  // sass-lint:disable-block no-important
  font-weight: $euiFontWeightBold !important;
}

// Header alternates
// Often these need extra specificity because they need to gracefully clash with the border settings

@include euiDataGridStyles(bordersNone, bordersHorizontal) {
  .euiDataGridHeader {
    background: $euiColorEmptyShade;
  }
}

@include euiDataGridStyles(headerUnderline) {
  @include euiDataGridHeaderCell {
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: $euiBorderThick;
    border-bottom-color: $euiTextColor;
  }
}

@include euiDataGridStyles(bordersNone, headerUnderline) {
  @include euiDataGridHeaderCell {
    border-bottom: $euiBorderThick;
    border-color: $euiTextColor;
  }
}

@include euiDataGridStyles(headerShade) {
  @include euiDataGridHeaderCell {
    background: tintOrShade($euiColorLightestShade, 0%, 10%);
  }
}

@include euiDataGridStyles(headerShade, bordersAll) {
  @include euiDataGridHeaderCell {
    border-right: $euiBorderThin;
    border-bottom: $euiBorderThin;
    border-left: none;

    &:first-of-type {
      border-left: $euiBorderThin;
    }
  }
}

@include euiDataGridStyles(headerShade, bordersHorizontal) {
  @include euiDataGridHeaderCell {
    border-top: none;
    border-bottom: $euiBorderThin;
  }
}

// Border alternates
@include euiDataGridStyles(bordersNone) {
  @include euiDataGridHeaderCell {
    border: none;
  }
}

@include euiDataGridStyles(borderhorizontal) {
  @include euiDataGridHeaderCell {
    border-top: none;
    border-right: none;
    border-left: none;
  }
}

// Font alternates
@include euiDataGridStyles(fontSizeSmall) {
  @include euiDataGridHeaderCell {
    @include euiFontSizeXS;
  }
}

@include euiDataGridStyles(fontSizeLarge) {
  @include euiDataGridHeaderCell {
    @include euiFontSize;
  }
}

// Padding alternates
@include euiDataGridStyles(paddingSmall) {
  @include euiDataGridHeaderCell {
    padding: $euiDataGridCellPaddingS;
  }
}

@include euiDataGridStyles(paddingLarge) {
  @include euiDataGridHeaderCell {
    padding: $euiDataGridCellPaddingL;
  }
}

@include euiDataGridStyles(noControls, bordersAll) {
  @include euiDataGridHeaderCell {
    border-top: $euiBorderThin;
  }
}

@include euiDataGridStyles(noControls, bordersHorizontal) {
  @include euiDataGridHeaderCell {
    border-top: $euiBorderThin;
  }
}
